<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f5f5f5;
        }

        .box {
            padding: 0.75rem 0.5rem;
            min-height: 100vh;
        }

        .box ul li {
            background-color: #2bcbaa;
            border-radius: 0.3rem;
            padding: 1rem 0.75rem;
            margin-bottom: 0.75rem;
        }

        .box ul li:last-of-type {
            margin-bottom: 0;
        }

        .bot {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: center;
            align-items: center;
            margin: 1.25rem 0 0.25rem;
            font-size: 1.5rem;
            line-height: 1.5rem;
        }

        .bot span {
            color: #fff;
        }

        .head {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
            height: 2.5rem;
        }

        .head h4 {
            font-size: 1rem;
            color: #fff;
        }

        .head h6 {
            font-size: 0.6rem;
            color: #fff;
        }

        .cardImg {
            width: 2.5rem;
            height: 2.5rem;
            float: left;
            margin-right: 0.5rem;
        }

        .cardRight {
            float: left;
            width: calc(100% - 3rem);
        }
    </style>
</head>

<body>
    <div class="box" id="app" v-cloak>
        <ul>
            <li class="aui-content clearfix" v-for="item in list" :style="'background:url('+item.bank_color+') center center/cover no-repeat;'" @click="removeCard(item.bank_id,item.bank_num)">
                <div class="cardImg" :style="'background:url('+item.bank_logo+') center center/cover no-repeat;'"></div>
                <div class="cardRight">
                    <div class="head">
                        <h4>{{item.bank_name}}</h4>
                        <h6>{{item.bank_type}}</h6>
                    </div>
                    <div class="bot">
                        <span>****</span><span>****</span><span>****</span><span>{{item.bank_num}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
    apiready = function() {
        var app = new Vue({
            el: '#app',
            data: {
                token: '', // 当前页
                list: []
            },
            created: function() {
                var $_this = this;
                $_this.token = $api.getStorage('token');
                api.ajax({
                    url: window.Url.Freeucenter_bankList,
                    method: 'post',
                    data: {
                        values: {
                            token: $_this.token,
                        }
                    }
                }, function(ret, err) {
                    if (ret.re == 1) {
                        $_this.list = ret.data.list
                        if($_this.list == '') {
                          api.toast({
                              msg: '暂无绑定的银行卡',
                              duration: 2000,
                              location: 'bottom'
                          });
                        }
                    }
                });
            },
            methods: {
                removeCard: function(id,num) {
                    var $_this = this;
                    api.confirm({
                        title: '解除绑定银行卡',
                        msg: '确认解除绑定尾号为'+num+'的银行卡吗？',
                        buttons: ['确定解除', '取消']
                    }, function(ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 1) {
                            api.ajax({
                                url: window.Url.Freeucenter_changBank,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $_this.token,
                                        bank_id: id
                                    }
                                }
                            }, function(ret, err) {
                              if(ret.re == 1) {
                                api.ajax({
                                    url: window.Url.Freeucenter_bankList,
                                    method: 'post',
                                    data: {
                                        values: {
                                            token: $_this.token,
                                        }
                                    }
                                }, function(ret, err) {
                                    if (ret.re == 1) {
                                        $_this.list = ret.data.list
                                    }
                                });
                              }
                              api.toast({
                                  msg: ret.info,
                                  duration: 2000,
                                  location: 'bottom'
                              });
                            })
                        }
                    })
                }
            }
        })

    }
</script>

</html>
